<template>
  <div class="ma-show-notice">
    <div class="header-section">
      <h2 class="page-title">我发布的通知</h2>
    </div>
    <div class="notice-list">
      <div v-if="loading" class="loading">加载中...</div>
      <div v-else-if="notices.length === 0" class="no-notices">暂无通知</div>
      <div v-else class="notice-items">
        <div v-for="notice in notices" :key="notice.id" class="notice-item">
          <div class="notice-header">
            <h3>{{ notice.title }}</h3>
            <span class="create-time">{{ formatDate(notice.createTime) }}</span>
          </div>
          <div class="notice-content">
            {{ notice.content }}
          </div>
          <div class="notice-info">
            <span>{{ getReceiverType(notice.receiverType) }}可见</span>
            <span class="status" :class="getStatusClass(notice.isUsing)">
              {{ getAuditStatus(notice.isUsing) }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

interface Notice {
  id: number
  senderType: number
  senderId: number
  receiverType: number
  receiverOneType: number | null
  receiverId: number | null
  title: string
  content: string
  createTime: string
  isUsing: boolean
}

const notices = ref<Notice[]>([])
const loading = ref(true)

// 获取通知列表
const fetchNotices = async () => {
  try {
    const token = localStorage.getItem('token')

    if (!token) {
      alert('未找到有效的身份凭证，请重新登录')
      loading.value = false
      return
    }

    const response = await fetch('http://localhost:8080/notice/my', {
      method: 'GET',
      headers: {
        'token': token
      }
    })

    if (response.ok) {
      const result = await response.json()
      if (result.success) {
        notices.value = result.notices
      } else {
        alert('获取通知失败')
      }
    } else {
      alert('网络请求失败')
    }
  } catch (error) {
    console.error('获取通知时出错:', error)
    alert('获取通知时发生错误')
  } finally {
    loading.value = false
  }
}

// 格式化日期
const formatDate = (dateString: string) => {
  const date = new Date(dateString)
  return date.toLocaleString('zh-CN')
}

// 获取接收者类型
const getReceiverType = (type: number) => {
  switch (type) {
    case 0: return '单独发送'
    case 1: return '所有人'
    case 2: return '管理员'
    case 3: return '主办方'
    case 4: return '用户'
    case 5: return '非管理员'
    case 6: return '非主办方'
    case 7: return '非用户'
    default: return '未知'
  }
}

// 获取审核状态
const getAuditStatus = (status: boolean) => {
  return status ? '已通过' : '未通过'
}

// 获取状态样式类
const getStatusClass = (status: boolean) => {
  return status ? 'status-approved' : 'status-pending'
}

// 在组件挂载时获取通知
onMounted(() => {
  fetchNotices()
})
</script>

<style scoped>
.ma-show-notice {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.header-section {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.page-title {
  font-size: 32px;
  color: #2E7D32;
  text-shadow: 0 0 8px rgba(56, 142, 60, 0.5);
  font-family: '微软雅黑', sans-serif;
  font-weight: bold;
  text-align: center;
}

.notice-list {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  min-height: 300px;
  box-shadow: none;
}

.loading, .no-notices {
  text-align: center;
  padding: 20px;
  color: #666;
  font-size: 18px;
}

.notice-items {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.notice-item {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  background-color: #f9f9f9;
}

.notice-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.notice-header h3 {
  margin: 0;
  color: #388E3C;
  font-size: 18px;
  font-weight: bold;
}

.create-time {
  font-size: 16px;
  color: #888;
}

.notice-content {
  margin-bottom: 10px;
  line-height: 1.5;
  font-size: 16px;
}

.notice-info {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #666;
}

.status {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
}

.status-pending {
  background-color: #FFF3CD;
  color: #856404;
}

.status-approved {
  background-color: #D1ECF1;
  color: #0C5460;
}
</style>
